<script setup>
import { reactive, watch } from "vue"

import gsap from 'gsap'

// 初始值
const d = reactive({
    num: 0
})

// 接收一个最终值
const props = defineProps({
    value: {
        type: Number,
        ddefault: 0
    }
})

// 定义一个方法 从初始值一直滚动到最终值
const numberTo = () => {
    // 从谁开始  经过多长时间   变成谁
    gsap.to(d, { duration: 0.5, num: props.value }
    )
}

// 调用这个方法
numberTo()

// 监听数据的变化 一旦产生变化了就直接调用动画
watch(() => props.value, () => {
    numberTo()
})
</script>

<template>
    {{ d.num }}
</template>